import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from "react-native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import React, { useEffect, useState } from "react";
import HeaderBack from "../../components/HeaderBack";

type Props = {
  navigation: NativeStackNavigationProp<any>;
  route: any;
};

export default function UserEditorForm({ navigation, route }: Props) {
  navigation.setOptions({
    title: "编辑" + route.params.title,
    headerLeft(props) {
      return <HeaderBack props={props} />;
    },
    headerRight(props) {
      return (
        <TouchableOpacity
          style={{ marginRight: 10 }}
          onPress={() => {
            console.warn("保存");
          }}
        >
          <Text style={{ color: "#0ca678", fontSize: 16 }}>保存</Text>
        </TouchableOpacity>
      );
    },
  });

  const { type, title, data } = route.params;
  const [maxLength, setMaxLength] = useState(140);
  const [content, setContent] = useState("");
  const [isShowMultiRow, setIsShowMultiRow] = useState(false);

  useEffect(() => {
    if (type == "desc") {
      setIsShowMultiRow(true);
    }
    setContent(data);
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.headerTop}>
        <Text style={styles.titleText}>{title}</Text>
        {!isShowMultiRow && (
          <TextInput
            style={styles.cheaderTopTextInput}
            numberOfLines={10}
            multiline={true}
            maxLength={maxLength}
            value={content}
            placeholder="请输入内容..."
            onChangeText={(text) => setContent(text)}
          />
        )}
      </View>
      {isShowMultiRow && (
        <View style={styles.content}>
          <TextInput
            style={styles.contentTextInput}
            numberOfLines={10}
            multiline={true}
            maxLength={maxLength}
            value={content}
            placeholder="请输入内容..."
            onChangeText={(text) => setContent(text)}
          />
          <Text style={styles.contentText}>
            {content.length}/{maxLength}
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 14,
    backgroundColor: "#f8f8f8",
  },
  headerTop: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  cheaderTopTextInput: {
    fontSize: 18,
    flex: 1,
    lineHeight: 18,
  },
  titleText: {
    fontSize: 18,
    color: "#999",
    // marginBottom: 10,
    marginRight: 10,
  },
  content: {
    paddingTop: 5,
    borderRadius: 5,
    position: "relative",
  },
  contentTextInput: {
    width: "100%",
    height: 220, // 控制输入框的高度
    backgroundColor: "#fff",
    lineHeight: 24,
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
    marginTop: 10,
  },
  contentText: {
    position: "absolute",
    right: 10,
    bottom: 10,
    color: "#999",
  },
});
